import React, { Component } from 'react';
import { Card, Divider } from 'antd';
import { ColumnProps } from 'antd/es/table';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import StandardTable from '@/components/StandardTable';

interface CustomTableProps {}

interface CustomTableState {
  columns: ColumnProps<any>[];
  selectedRows: unknown[];
}

const list: any = [];
for (let i = 0; i < 100; i++) {
  list.push({
    key: i,
    name: 'John Brown',
    age: i + 1,
    street: 'Lake Park',
    building: 'C',
    number: i + 2001,
    companyAddress: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    companyName: 'SoftLake Co',
    gender: 'M',
    disabled: !!(i % 3),
  });
}

class CustomTable extends Component<CustomTableProps, CustomTableState> {
  state: CustomTableState = {
    columns: [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        width: 100,
        ellipsis: true,
        fixed: 'left',
        filters: [
          { text: 'Joe', value: 'Joe' },
          { text: 'John', value: 'John' },
        ],
        onFilter: (value, record) => record.name.indexOf(value) === 0,
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: 80,
        needTotal: true,
        sorter: (a, b) => a.age - b.age,
      },
      {
        title: 'Street',
        dataIndex: 'street',
        key: 'street',
        width: 150,
        needTotal: true,
        ellipsis: true,
      },
      {
        title: 'Building',
        dataIndex: 'building',
        key: 'building',
        width: 100,
      },
      {
        title: 'Door No.',
        dataIndex: 'number',
        key: 'number',
        width: 100,
        needTotal: true,
      },
      {
        title: 'Company Address',
        dataIndex: 'companyAddress',
        key: 'companyAddress',
        width: 200,
        ellipsis: true,
      },
      {
        title: 'Company Name',
        dataIndex: 'companyName',
        key: 'companyName',
        width: 200,
        ellipsis: true,
      },
      {
        title: 'Gender',
        dataIndex: 'gender',
        key: 'gender',
        width: 80,
      },
      {
        title: 'Action',
        key: 'action',
        width: 120,
        fixed: 'right',
        render: (text, record) => (
          <>
            <a>Invite</a>
            <Divider type="vertical" />
            <a>Delete</a>
          </>
        ),
      },
    ],
    selectedRows: [],
  };

  componentDidMount() {}

  handleSelectRows = (selectedRows: unknown[]) => this.setState({ selectedRows });

  render() {
    const { columns, selectedRows } = this.state;
    return (
      <PageHeaderWrapper>
        <Card>
          <StandardTable
            scroll={{ x: '100%', y: 'calc(100vh - 503px)' }}
            data={{ columns, list }}
            selectedRows={selectedRows}
            onSelectRow={this.handleSelectRows}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default CustomTable;
